<template>
  <div class="about">
    <my-head />
    <!-- 使用v-model可以进行父子传值 本质还是绑定的value属性 -->
    <my-input v-model="text" />
    <my-color v-model="color" />
    <button :disabled="setDis" @click="btnClick">
      {{ setDis ? "再想想" : isEdit ? "修改" : "许愿" }}
    </button>
    <div class="card-box">
      <div
        v-drag="index"
        class="card"
        v-for="(item, index) in card"
        :key="index"
        :style="{ background: item.color, left: item.left, top: item.top }"
        @click="edit(index)"
      >
        <!-- 点击的时候把索引值传过去 -->
        {{ item.text }}
        <span @click="del(index)"> X </span>
        <!-- 特殊符号，报错不影响运行 -->
      </div>
    </div>
  </div>
</template>
<script>
import MyColor from "../components/myColor.vue";
import myHead from "../components/myHead.vue";
import MyInput from "../components/myInput.vue";
export default {
  components: { myHead, MyInput, MyColor },
  data() {
    return {
      text: "",
      color: "",
      isEdit: false, //是否修改
      card: [],
      editIndex: 0,
    };
  },
  computed: {
    //利用计算属性控制按钮的禁用状态
    setDis() {
      //和form表单同
      return !(this.text && this.color);
    },
  },
  methods: {
    btnClick() {
      //判断是否为修改状态
      if (this.isEdit) {
        //修改逻辑
        //修改card中对应索引的text和color
        this.card[this.editIndex].text = this.text;
        this.card[this.editIndex].color = this.color;
        this.isEdit = false; //取消修改状态
      } else {
        //添加逻辑

        //生成0-100的随机数
        let left = Math.floor(Math.random() * 101);
        let top = Math.floor(Math.random() * 101);
        this.card.push({
          text: this.text,
          color: this.color,
          left: left > 50 ? `calc(${left}% - 70px)` : left + "%", //防止溢出
          top: top > 50 ? `calc(${top}% - 70px)` : top + "%",
        });
        //进行清空
        this.text = "";
        this.color = "";
      }
    },
    del(index) {
      //传递索引进行删除
      this.card.splice(index, 1);
    },
    edit(index) {
      //初始化输入框内容和颜色选中状态
      this.text = this.card[index].text;
      this.color = this.card[index].color;
      this.editIndex = index; //将索引存放起来，修改的时候可以调用
      this.isEdit = true; //设置修改状态
    },
  },
  created() {
    //创建时初始化card
    //第一次获取不到数据，并且返回的是null 用||给个空数组类型，不然push的时候会报错
    this.card = JSON.parse(localStorage.getItem("card")) || [];
  },
  watch: {
    //数组发生变化时，存储到本地
    card: {
      deep: true,
      handler() {
        localStorage.setItem("card", JSON.stringify(this.card));
      },
    },
  },
  directives: {
    drag: {
      inserted(el, binding, vnode) {
        // console.log(binding, vnode)
        //el是绑定的元素，binding可以获取绑定的值，vnode可以获取到vue实例
        let index = binding.value;
        let card = vnode.context.card;

        var target = el;
        var startX = 0;
        var startY = 0;

        target.addEventListener("touchstart", function (e) {
          startX = e.targetTouches[0].pageX - this.offsetLeft;
          startY = e.targetTouches[0].pageY - this.offsetTop;
        });
        target.addEventListener("touchmove", function (e) {
          var leftX = e.targetTouches[0].pageX - startX;
          var topY = e.targetTouches[0].pageY - startY;
          var thisW = e.targetTouches[0].target.clientWidth;
          var parentW = e.targetTouches[0].target.offsetParent.clientWidth;
          var thisH = e.targetTouches[0].target.clientHeight;
          var parentH = e.targetTouches[0].target.offsetParent.clientHeight;

          if (leftX <= 0) {
            leftX = 0;
          }

          if (leftX >= parentW - thisW) {
            leftX = parentW - thisW;
          }

          if (topY <= 0) {
            topY = 0;
          }

          if (topY >= parentH - thisH) {
            topY = parentH - thisH;
          }

          this.style.left = leftX + "px";
          this.style.top = topY + "px";

          //修改坐标位置
          card[index].left = leftX + "px";
          card[index].top = topY + "px";
        });
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.about {
  height: 100%;
  display: flex;
  flex-direction: column;
}
button {
  display: block;
  margin: 10px auto;
  padding: 0 5px;
}
.card-box {
  flex-grow: 1;
  position: relative;
  .card {
    width: 70px;
    height: 70px;
    position: absolute;
    span {
      position: absolute;
      right: 3px;
      top: 3px;
      background-color: #fff;
      width: 15px;
      height: 15px;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
